<template>
	<!-- 下拉填空 -->
	<view class="type_8">
		<view class="questionText">
			<template v-for="(item,index_1) of questionTextList">
				<template v-if="item.type=='select'">
					<uni-data-select v-if="paperMode==1" class="selector" v-model="activeAnswer[item.index]"
						:localdata="choicesList[item.index]" :clear="false"
						@change="selectChange($event,item.index)"></uni-data-select>
					<text v-else-if="paperMode==2">______</text>
				</template>
				<template v-else-if="item.type=='text'">
					<text style="white-space: pre-wrap;" v-html="item.text"></text>
				</template>
			</template>
		</view>
		<view class="questionResources">
			<view class="questionResource" v-for="questionResource of activeQuestion.questionResources">
				<image :src="questionResource.href" mode="aspectFit" @click="previewImage(questionResource.href)">
				</image>
				<text>
					{{questionResource.resourceName}}
				</text>
			</view>
		</view>

		<template v-if="paperMode==2 && activeRecord">
			<view class="recordCard">
				<view class="title">参考答案</view>
				<view class="answer">
					<!-- {{activeRecord.answer}} -->
					<template v-if="activeRecord.answer===null">无</template>
					<template v-else>
						<!-- {{getChoiceIndex(activeRecord.answer)}} -->
						<view v-for="(answer,index) of activeRecord.answer" style="margin-top:0.5vw;">
							{{choicesList[index][answer].text}}
						</view>
					</template>
				</view>
				<view v-if="activeRecord.answerDetail" class="answerDetail">
					{{activeRecord.answerDetail}}
				</view>
			</view>


			<view class="recordCard">
				<view class="title">我的答案</view>
				<view class="userAnswer">
					<!-- {{activeAnswer}} -->
					<template v-if="activeRecord.userAnswer===null">无</template>
					<template v-else>
						<!-- {{getChoiceIndex(activeRecord.userAnswer)}} -->
						<view v-for="(answer,index) of activeRecord.userAnswer" style="margin-top:0.5vw;">
							<template v-if="answer===null">
								-
							</template>
							<template v-else>
								{{choicesList[index][answer].text}}
							</template>
						</view>
					</template>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		props: ["paperMode", "activeQuestion", "initAnswer", "activeRecord"],
		data() {
			return {
				activeAnswer: null
			}
		},
		computed: {
			questionTextList() {
				let res = [],
					selectIndex = 0;
				this.activeQuestion.questionText.split(/(__)/g).forEach(item => {

					if (item == "__") {
						res.push({
							type: "select",
							index: selectIndex++
						})
					} else {
						res.push({
							type: "text",
							text: item
						})
					}

				})
				return res
			},
			choicesList() {
				let res = this.activeQuestion.choices.map(item => {
					console.log("item.choiceText", item.choiceText)
					try {
						return JSON.parse(item.choiceText).map((item2, index2) => ({
							value: index2,
							text: item2
						}))
					} catch (e) {
						return []
					}
				})
				// console.log("choicesList", res)
				return res
			}
		},
		created() {
			this.activeAnswer = this.initAnswer;
		},
		methods: {
			selectChange(e, index) {
				// this.activeAnswer[index] = String(e); //此处不能是字符串，否则组件切换有问题
				this.$emit("updateAnswer", this.activeAnswer);
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./record.scss";

	.type_8 {
		.questionText {
			line-height: 2vw;

			.selector {
				display: inline-flex;
				width: 15vw;
				margin-left: 1vw;
				margin-right: 1vw;

				/deep/ * {
					font-size: 1.4vw !important;
				}

			}
		}

		.questionResources {
			margin-top: 1vw;
			display: flex;
			flex-wrap: wrap;

			.questionResource {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding-bottom: 0.5vw;

				image {
					width: 30vw;
					max-height: 30vw;
					margin-bottom: 0.5vw;
				}

				text {
					color: #999;
					max-width: 25vw;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 1.2vw;
					line-height: 2vw;
				}
			}
		}
	}
</style>